<template>
	<view class="course-detail" v-if="!isEmpty">
		<view class="top">
			<view class="banner">
				<!-- 是否轮播:indicator-dots  自动播放:autoplay  间隔周期:interval  动画执行周期:duration -->
				<swiper :indicator-dots="true" :autoplay="true" :interval="8000" :duration="1000">
					<swiper-item v-for="(item,index) in bannerList" :key="index">
						<img :src="$xyfun.image(item)" mode="widthFix" alt="">
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="p-30 bg-w">
			<view class="flex just-sb">
				<view class="tb ts-40">{{course.name}}</view>
				<view>参考价￥<text>{{course.price}}</text></view>
			</view>
			<view class="m-t-20 ts-24 tc-777">{{course.description}}</view>
      <view class="m-t-20 ts-24 "><text  v-for="(item,index) in tagList">{{item}}<text class="m-lr-10" v-if="index+1!==tagList.length">|</text></text></view>
		</view>
		<view class="course-desc bg-w flex just-sb p-30">
			<view class="col-3">
				<view class="ts-26 m-b-15">难度</view>
				<view class="flex m-t-10 h-40"><view class="yz-iconfont yz-shoucang m-r-10" style="color:#eeb173;" v-for="(item,index) in diff_arr"></view></view>
			</view>
			<view class="col-3">
				<view class="ts-26 m-b-15">时长</view>
        <view class="ts-24 flex ali-cen h-40"><text class="ts-36 tb m-r-10">{{course_minutes}}</text>分钟</view>
			</view>
		</view>
		
		<view class="info-box">
      <view class="info-box-crumb">
        <view @tap="crumb_active='introduce'" :class="crumb_active=='introduce'?'active':''"><text>课程介绍</text></view>
        <view @tap="crumb_active='invite'" :class="crumb_active=='invite'?'active':''"><text>约课规则</text></view>
      </view>
      <block v-if="crumb_active=='introduce'">
        <view class=" p-30">
          <rich-text :nodes="$xyfun.richTextHandle(course.intro)"></rich-text>
        </view>
      </block>
			<block v-if="crumb_active=='invite'">
				<view class=" p-30">
					<rich-text :nodes="$xyfun.richTextHandle(course.rule)"></rich-text>
				</view>
			</block>
		</view>
		
		<view class="bottom-fixed flex tc bg-w">
			<view class="p-lr-30 p-tb-15 flex tc wa">
				<button class="home m-r-40 tc lh-32" @tap="$xyfun.to('/pages/index',true)">
					<text class="xyicon icon-home ts-36 lh-36"></text>
					<view class="text ts-26 m-t-10 ts-26">首页</view>
				</button>
				<button class="favorite m-r-40 lh-32 tc-b" @tap="onFavorite()">
					<text class="yz-iconfont ts-44 tc lh-40" :class="course.favorite ? 'yz-yishoucang color' : 'yz-shoucang1'" @tap="onFavorite()"></text>
					<view class="text ts-26 m-t-10 lh-26">收藏</view>
				</button>
				<button open-type="contact" class="kefu m-r-40 tc lh-32 tc-b">
					<text class="xyicon icon-kefu ts-36 lh-36"></text>
					<view class="text ts-26 m-t-10 ts-26">客服</view>
				</button>
				<view class="action flex m-l-auto">
					<view class="buy m-l-auto tc-w" @tap="buyCourse()">
						前往预约
					</view>
				</view>
			</view>
		</view>

		
	</view>
</template>

<script>
	import { mapState } from 'vuex';
  import xyEmpty from "@/components/xy-empty/index.vue";
	export default {
		components: {
      xyEmpty
    },
		data() {
			return {
				isEmpty:true,
				id: 0,
				diff_arr: [],
				course:{},
        course_minutes: 0,
				bannerList: [],
        tagList: [],
        crumb_active: 'introduce',
        date: '',
        disable : false
			}
		},
		computed: {
			...mapState(['common','user'])
		},
		async onLoad() {
			var options = this.$Route.query;

      if(options?.id){
				this.id = options.id;
			}

      this.loadData();
		},
		methods: {
      async loadData() {
        var that = this;
        this.$api.get({
          url: '/course/detail',
          loadingTip: '加载中...',
          data: {
            id: this.id,
          },
          success: res => {
            this.isEmpty = false;
            that.course = res;
            that.course_handle(that);
          }
        })
      },

      //处理课程的数据
      course_handle(_that){
        let course = _that.course;
        _that.id = course.id;
        //难度number类型转array类型
        let diff_arr = [];
        for (let i = 0; i < course.difficulty; i++) {
          diff_arr.push(i);
        }
        _that.diff_arr = diff_arr;

        _that.course_minutes = course.duration;

        //图片组
        _that.bannerList = course.images.split(",");
        _that.tagList = course.tags.split(",");

      },
			
			// 收藏
			onFavorite() {
				if (this.user.isLogin) {
          if(!this.disable){
            this.disable = true;
            this.$api.post({
              url: '/user_favorite/add',
              data: {
                target_id:this.id,
              },
              success: res => {
                this.course.favorite = res;
                this.$xyfun.msg(res?'收藏成功' : '取消收藏');
                this.disable = false;
              }
            });
          }
				} else {
					this.$xyfun.toLogin();
				}
			},
			
			//前往预约
			buyCourse(){
				var that = this;
				if(this.user.isLogin){
					if(!this.user.info.mobile){
						uni.showModal({
							title:'温馨提现',
							content:'请先完善信息，补充昵称和手机号在下单。',
							success(e) {
								if(e.confirm){
									that.$xyfun.to('/pages/user/info')
								}
							}
						})
					}else{
            that.$xyfun.to('/pages/pay/create?id=' + this.id)
          }
				}else{
					this.$xyfun.toLogin();
				}
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.course-detail{
		padding-bottom: 150rpx;
    background: #fff;
    min-height: 100vh;
		.top{
			width: 750rpx;
			height: 400rpx;
			position: relative;
			swiper{
				height: 400rpx;
			}
			img{
				height: 400rpx;
				width: 750rpx;
			}
		}
		.info-box{
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .info-box-crumb{
        margin-top: 40rpx;
        display: flex;
        justify-content: space-evenly;
        font-size: 26rpx;
        view{
          position: relative;
          text-align: center;
          width: 150rpx;
          line-height: 30rpx;
          margin-bottom: 30rpx;
        }
        .active{
          position: relative;
          text-align: center;
          font-weight: bold;
          color: #95e8d0;
          text{
            z-index: 2;
            font-weight: bold;
            position: relative;
          }
          &:after{
            content: '';
            width: 60rpx;
            background: #95e8d0;
            border-radius: 6rpx;
            display: block;
            height: 5rpx;
            left: 0;
            right: 0;
            bottom: -20rpx;
            margin: 0 auto;
            position: absolute;
          }
        }
      }

		}
		.course-desc{
			font-size: 26rpx;
      border-top: 12rpx solid #f2f2f2;
      border-bottom: 12rpx solid #f2f2f2;
			.col-3{
				padding-left: 10rpx;
				box-sizing: border-box;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
			}
		}

    .bottom-fixed {
      box-shadow: 0 0 40rpx #dddddd;
      .favorite{
        .color{
          color: #5cc5a6;
        }
      }
      button {
        background: none;
        padding: 0;
        margin-left: 0;
        height: auto;
      }

      button::after {
        border: none;
      }

      .buy {
        width: 260rpx;
        height: 72rpx;
        border-radius: 36rpx;
        line-height: 72rpx;
      }
    }

    .action{
      .buy{
        background: #5CC5A6;
        font-weight: bold;
        color: #fff;
      }
    }
	}

</style>
